<template>
  <div class="menu">
    <page-content
      :content-config="contentConfig"
      @createRecord="handleCreateRecord"
      @editRecord="handleEditRecord"
    />
    <page-modal :modal-config="modalConfigRef" ref="modalRef" />
  </div>
</template>

<script setup lang="ts">
import contentConfig from '@/views/main/system/menu/config/content.config.js';
import modalConfig from '@/views/main/system/menu/config/modal.config';
import usePageModal from '@/hooks/usePageModal';
import { computed } from 'vue';
import { useLoginStore } from '@/store/login';
import { storeToRefs } from 'pinia';

const { modalRef, handleCreateRecord, handleEditRecord } = usePageModal();
const loginStore = useLoginStore();
const { userMenus } = storeToRefs(loginStore);

const modalConfigRef = computed(() => {
  const firstMenus = userMenus.value?.map((item: any) => {
    return { label: item.name, value: item.id };
  });
  if (firstMenus) {
    modalConfig.formItems?.forEach((item) => {
      if (item.prop === 'parentId' && item.options?.length === 0) {
        item.options.push(...firstMenus);
      }
    });
  }
  return modalConfig;
});
</script>

<style scoped lang="scss">
.menu {
}
</style>
